import React from 'react';
import { Button, Table,Drawer } from 'antd';
import styles from '@/pages/KnowledgeManagement/Overview/editQa/index.less';
import moment from 'moment';

class HistoryList extends React.Component{

  render() {
    const { dataSource,visible,closeHistory } = this.props;
    const columns = [
      {
        title: '问题',
        dataIndex: 'qaName',
        width: 'calc(40vw)',
      },
      {
        title: '回答',
        dataIndex: 'answers',
        width: 'calc(40vw)',
        render: (text,row) => {
          const item = row.dataJson.answers;
          if (item) {
            const b = item.map(answerItem => {
              const val = answerItem.content;
              if (val.indexOf('img') != -1) {
                const a = val.replace('img', 'img style="max-width:100%"');
                return (
                  <div onClick={() => this.openGaller(a)}>
                    <div className={styles.hdbjB} dangerouslySetInnerHTML={{ __html: a }} />
                  </div>
                );
              };
              return (
                <div>
                  <div dangerouslySetInnerHTML={{ __html: val }} />
                </div>
              );
            });
            return b;
          }
        },
      },
      {
        title: '时间',
        dataIndex: 'updateTime',
        key: 'updateTime',
        width: 'calc(25vw)',
        render: dataIndex => {
          return moment(dataIndex).format('YYYY-MM-DD HH:mm:ss');
        },
      },
      {
        title: '操作',
        dataIndex: 'operationType',
        key: 'operationType',
        width: 'calc(15vw)',
        render: (text, recoder) => {
          switch (text) {
            case 1:
              return (
                <Button type="primary" size="small">新建</Button>
              );
              break;
            case 2:
              return (
                <Button type="primary" style={{ backgroundColor: 'grey', color: '#fff' }} size="small">更新</Button>
              );
              break;
            case 3:
              return (
                <Button type="primary" size="small" style={{ backgroundColor: 'lightred', color: '#fff' }}>删除</Button>
              );
              break;
          }
        },
      },
      {
        title: '操作人',
        dataIndex: 'nick',
        key: 'nick',
        width: 'calc(20vw)',
      },
    ];
    return (
      <Drawer
        title={'历史记录'}
        onClose={closeHistory}
        closable
        visible={visible}
        width={700}
      >
        <Table
          columns={columns}
          dataSource={dataSource}
          pagination={false}
        />
      </Drawer>

    )
  }
}

export default HistoryList
